<template>
	<view class="Sidebar">
		<scroll-view style="white-space: nowrap;width: 100%;height: 100%;" class="scroll_box" scroll-y="true">
			<view v-for="(item,index) in arr" :key='index' class="item_type"
				:class="{'bor_cor':isShow&&value.includes(item.id)||(value.length==0&&!item.id)}">
				<span v-if="isShow&&select.filter(o=>o.oneTypeId==item.id).length>0" class="red_num">{{select.filter(o=>o.oneTypeId==item.id).length}}</span>
				<view class="allbox" @click="lock(item,index)">
					<view class="title_box">
						<slot name="title">
							<view
								:class="{'box':true,'title':value.includes(item.id)||(value.length==0&&!item.id),'fontWeight':!item.id,'is_disabled':item.disabled}">
								{{item.name}}
							</view>
						</slot>
					</view>
					<view v-if="item.childData&&item.childData.length>0" class="right right-arrow"
						:class="{ 'right-arrow-active': item.select&&value.includes(item.id),'Sidebar--animation': true }">
						<uni-icons :color="value.includes(item.id)?'#007cff':'#bbb'" size="14" type="bottom" />
					</view>
				</view>
				<view v-if="item.select&&item.childData&&value.includes(item.id)" style="padding-left: 24rpx;">
					<SidebarItem @chenge-ids="chengeIds" :value="value" :arr='item.childData' :tree="item.id"
						:isShow="false">
					</SidebarItem>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import SidebarItem from './SidebarItem.vue'
	import store from '@/store_network/index.js'
	import {
		ref, toRefs, watch, onMounted, nextTick
	} from "vue";
	const props = defineProps({
		//子组件接收父组件传递过来的值
		arr: Object,
		isShow: {
			type: Boolean,
			default: true
		},
		tree: {
			type: [String, Number],
			default: ''
		},
		value: {
			type: Array,
			default: []
		},
		select:[Array,Object]
	})
	const { tree,select } = toRefs(props)
	const emit = defineEmits(['chenge-ids'])
	const active = ref(null)//当前id
	// 点击
	function lock(item, index) {
		item.select = !item.select
		if (item.disabled) return
		if (tree.value) {
			emit('chenge-ids', [tree.value, item.id])
		} else {
			item.id ? emit('chenge-ids', [item.id]) : emit('chenge-ids', [])
		}

		active.value = item.id
	}
	const chengeIds = (val) => {
		if (tree.value) {
			emit('chenge-ids', [tree.value, ...val])
		} else {
			emit('chenge-ids', [...val])
		}
	}
</script>

<style lang="scss">
	.Sidebar {
		// padding-right: 12rpx;

		.scroll_box {
			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}
		}

		.sidebar_item {
			// border-top: 1px solid #eee;
		}

		.box {
			height: 80rpx;
			line-height: 80rpx;
			// padding: 0px 5px 5px 10px;
			font-size: 26rpx;
			overflow: hidden;
			text-overflow: ellipsis; // text-overflow css3的属性，当文本溢出时，显示省略号
			display: -webkit-box;
			-webkit-line-clamp: 1; // 设置两行文字溢出
			-webkit-box-orient: vertical;
			word-break: break-all;
			word-wrap: break-word;
			white-space: pre-wrap;
		}

		.title {
			color: #007cff;
			font-weight: bold;
		}

		.is_disabled {
			color: #bbb;
		}

		.fontWeight {
			font-weight: bold;
		}

		.item_type {
			position: relative;

			&.bor_cor {
				// background-color: #007cff2b;
				background-color: #fff;
			}

			.red_num {
				background-color: #FF5733;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				position: absolute;
				top: -4rpx;
				right: 0rpx;
				text-align: center;
				border-radius: 50%;
				color: #fff;
				font-size: 22rpx;
				transform: scale(.8);
			}
		}

		.allbox {
			display: flex;
			justify-content: space-between;
			// border-bottom: 1px solid #eee;
		}

		// 主标题
		.title_box {
			display: flex;
			padding-left: 24rpx;
		}

		.right {
			line-height: 90rpx;
			margin: auto 0;
			display: flex;
			flex-direction: row;
			align-items: center;

			&-arrow {
				/* #ifndef APP-NVUE */
				display: flex;
				box-sizing: border-box;
				/* #endif */
				align-items: center;
				justify-content: center;
				width: 40rpx;
				height: 40rpx;
				transform: rotate(-90deg);

				&-active {
					transform: rotate(0deg);
				}
			}
		}

		// 副标题
		.Subtitle {
			color: #a7b1ae;
			padding: 0 10rpx 10rpx 20rpx;
			font-size: 28rpx;
		}

		&--animation {
			transition-property: transform;
			transition-duration: 0.3s;
			transition-timing-function: ease;
		}
	}
</style>